<template>
    <div class="advise">
        <h3>宁工校园服务</h3>
        <h2>投诉和建议</h2>
        <img class="pencil" src="../../../static/images/pencil.png" alt="">
        <div class="selecter">
            <div class="problem" @click="showDrawer">
                <p>{{innerQuestion || '问题分类'}}</p>
                <img src="../../../static/images/triangle.png" alt="">
            </div>
            <div class="position" @click="addressPop = !addressPop">
                <p>{{userAddress || '选择地址'}}</p>
                <img src="../../../static/images/triangle.png" alt="">
            </div>
        </div>
        <div class="section">
            <div class="title">
                <input v-model="userProblem.title" type="text" placeholder="请填写标题">
            </div>
            <div class="content">
                <label for="question">
                    <img src="../../../static/images/write.png" alt="">
                    {{userInfo.nickName}}
                </label>
                <textarea id="question" v-model="userProblem.content" type="text" placeholder="为利于意见和建议及时处理，请明确填写相关问题的时间、地点、和事件过程"></textarea>
            </div>
            <div class="submit" @click="submit">提交</div>
        </div>
        <div class="checkbox" @click="hasAgree = !hasAgree">
            <div class="squre hasAgree?'squereCheck':''">
                <img v-if="hasAgree" src="../../../static/images/check.png" alt="">
            </div>
            同意公开留言内容
        </div>
        <div class="comment-wrap">
            <div class="content">
                <div class="header" @click="goDetail">
                    <text>权威回复</text>
                    <div class="more">更多
                        <img src="../../../static/images/right.png" alt="">
                    </div>
                </div>
                <div v-for="item in topSuggestionList" :key="item.id" class="comment">
                    <div class="company">
                        <img src="../../../static/images/Reply.png" alt="">
                        {{item.classify}}
                    </div>
                    <p class="title ellipsis">{{item.reply}}</p>
                    <div class="problem">
                        <div class="user">{{item.name}} 来自 {{item.place}}</div>
                        <p class="user-problem ellipsis">{{item.content}}</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 弹出框 问题 -->
        <div class="shaw" v-if= "questionPop || addressPop" @click="hideDrawer"></div>
        <div class="drawer-contern" :class = "questionPop ? 'trans-footer' : '' ">
            <h4>选择问题的分类</h4>
            <div class="list">
                <text  v-for ="(item, index) in questionSort" :key ="index" :class="hasQuesionCheck == index+1 ? 'checked' : ''" @click="choseQuestion(index,item)">{{item}}</text>
            </div>
        </div>
        <!-- 弹出框 地区 -->
        <div class="drawer-contern" :class = "addressPop ? 'trans-footer' : '' ">
            <div class="list">
                <text  v-for ="(item, index) in address" :key ="index" :class="hasAddressCheck == index ? 'checked' : ''" @click="choseAddress(index,item)">{{item}}</text>
            </div>
        </div>
        <!-- <DrawerFooter v-if='true' :questionSort="questionSort"></DrawerFooter> -->
    </div>
</template>

<script>
import { mapActions, mapState } from'vuex';
import DrawerFooter from '../../components/DrawerFooter';
export default {
    components: {
        DrawerFooter
    },
    data () {
        return {
          hasAgree:false,
          userProblem: {
              title: '',
              content: ''
          },
          questionSort:[
              '食堂餐饮服务',
              '商业街服务',
              '医疗服务',
              '校车服务',
              '维修服务',
              '学生公寓管理服务',
              '校园物业服务',
              '其他服务',
          ],
          questionPop: false,
          hasQuesionCheck: 0,
          hasAddressCheck:0,
          innerQuestion:'',
          addressPop: false,//问题类型
          hasAddressCheck:0,//地址
          userAddress:'',
          address:['1号楼','2号楼','3号楼','4号楼','5号楼','6号楼', '7号楼', '8号楼', '9号楼', '10号楼','11号楼','12号楼','13号楼','14号楼','15号楼']
        }
    },
    mounted() {
      this.getSuggestionList();
    },
    computed: {
      ...mapState(['userInfo', 'suggestionList', 'suggestionLoading']),
      topSuggestionList() {
        return this.suggestionList.slice(0, 10);
      }
    },
    methods: {
      ...mapActions(['getSuggestionList', 'submitSuggestion']),
      goDetail () {
          this.$router.push('/pages/adviseList/index')
      },
      showDrawer () {
          this.questionPop = !this.questionPop;
      },
      choseQuestion (index,item) {
          this.questionPop = !this.questionPop;
          this.hasQuesionCheck = index+1;
          this.innerQuestion = item;
      },
      choseAddress (index,item) {
          this.addressPop = !this.addressPop;
          this.hasAddressCheck = index;
          this.userAddress = item;
      },
      hideDrawer () {
          this.questionPop = false;
          this.addressPop = false;
      },
      clearForm() {
        this.userProblem = {
          title: '',
          content: '',
        };
        this.hasAgree = false;
        this.userAddress = '';
        this.innerQuestion = '';
        this.hasQuesionCheck = 0;
      },
      submit() {
        if (this.suggestionLoading) return;
        const params = {
          classify: this.hasQuesionCheck,
          place: this.userAddress,
          title: this.userProblem.title.trim(),
          content: this.userProblem.content.trim(),
          isPublic: this.hasAgree
        };
        console.log(params);
        if (!params.classify) {
          mpvue.showToast({
            title: '请选择问题分类',
            icon: 'none',
          });
          return;
        } else if (!params.place) {
          mpvue.showToast({
            title: '请选择地址',
            icon: 'none',
          });
          return;
        } else if (!params.title) {
          mpvue.showToast({
            title: '请填写标题',
            icon: 'none',
          });
          return;
        } else if (!params.content) {
          mpvue.showToast({
            title: '请填写意见或建议',
            icon: 'none',
          });
          return;
        }
        if (params.isPublic) {
          mpvue.showModal({
            title: '提示',
            content: '您勾选了同意公开留言内容，留言将可能在权威回复中展示！',
            success: (res) => {
              if (res.confirm) {
                this.submitSuggestion({
                  params,
                  cb: () => {
                    this.clearForm.call(this);
                  },
                });
              }
            }
          });
        } else {
          this.submitSuggestion({
            params,
            cb: () => {
              this.clearForm.call(this);
            },
         });
        }
      }
    }
}
</script>
<style lang="scss" scoped>
@import '../../common/man.scss';

.advise{
    background: #0d59a5;
}
h3 {
  line-height: 66rpx;
}
h2 {
  line-height: 86rpx;
}
.pencil {
  display: block;
  width: 340rpx;
  height: 20rpx;
  overflow: hidden;
  margin: 16rpx auto
}
.selecter{
    width: 690rpx;
    height: 110rpx;
    margin: auto;
    border-radius: 12rpx;
    background: #fff;
    display: flex;
    div{
        width: 50%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        p{
            font-size: 30rpx;
            color: #55535e;
        }
        img{
            width: 12rpx;
            height: 8rpx;
            margin-left: 12rpx;
        }
        &:first-child {
            &::before {
                content: '';
                position: absolute;
                right: 0;
                height: 40rpx;
                width: 2px;
                background: #efefef;
            }
        }
    }
}
.section{
    width: 690rpx;
    background: #fff;
    border-radius: 12rpx;
    margin: 28rpx auto 0;
    .title{
        border-bottom: 1px solid #eaeaea;
        input{
            height: 108rpx;
            line-height: 108rpx;
            font-size: 30rpx;
            padding: 0 56rpx 0 40rpx;
        }
    }
    .content{
        padding: 0 56rpx 0 40rpx;
        label{
            font-size: 30rpx;
            line-height: 84rpx;
            img{
                width: 21rpx;
                height: 20rpx;
            }
        }
        textarea{
            width: 100%;
            height: 150rpx;
            line-height: 38rpx;
            font-size: 30rpx;

        }
    }
    .submit{
        text-align: center;
        line-height: 110rpx;
        font-size: 30rpx;
        color: #333333;
        border-top: 1rpx solid #eaeaea
    }
}
.checkbox{
    display: flex;
    align-items: center;
    height: 124rpx;
    padding-left: 38rpx;
    font-size: 26rpx;
    color: #fff;
    .squre{
        width: 28rpx;
        height: 28rpx;
        border-radius: 5rpx;
        border: 1px solid #fff;
        margin-right: 10rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        img{
            width: 16rpx;
            height: 14rpx;
        }
    }
    .squereCheck{
        background: #fff;
    }
}
.comment-wrap{
    background: #eff4f7;
    padding: 28rpx;
    .content{
        background: #fff;
        padding: 0 38rpx;
        .header{
            display: flex;
            justify-content: space-between;
            align-items: center;
            line-height: 106rpx;
            height: 106rpx;
            font-size:40rpx;
            border-bottom: 1px solid #e7e7e7;
            .more {
                font-size: 26rpx;
                color: #9a9b9a;
                img{
                    width: 14rpx;
                    height:  24rpx;
                    margin-left: 12rpx;
                }
            }
        }
        .comment{
            padding: 16rpx 0 35rpx 0;
            border-bottom: 1px solid #ededed;
            .company{
                height: 64rpx;
                display: flex;
                align-items: center;
                font-size: 26rpx;
                img{
                    width: 30rpx;
                    height: 30rpx;
                    margin-right: 12rpx;
                }
            }
            .title{
                font-size: 30rpx;
                line-height: 44rpx;
            }
        }
        .problem{
            margin-top: 30rpx;
            padding: 30rpx 40rpx;
            font-size: 26rpx;
            color: #a0a59f;
            background: #eff4f7;
            .user-problem{
                color: #000
            }
        }
    }
}
//弹出框

.shaw{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .6;
    z-index: 1000;
}
.drawer-contern{
    width: 692rpx;
    position: fixed;
    top: 100%;
    left: 0;
    background: #fff;
    padding: 0 30rpx;
    border-radius: 12rpx 12rpx 0 0;
    transition: all .3s;
    z-index: 10000;
    h4{
        height: 106rpx;
        line-height: 106rpx;
        font-size: 38rpx;
        font-weight: 600;
        color: #000;
        border-bottom: 1px solid #eaeaea;
    }
    .list{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding-bottom: 40rpx;
        text{
            width: 335rpx;
            height: 78rpx;
            text-align: center;
            line-height: 78rpx;
            border-radius: 10rpx;
            color: #636267;
            border: 1px solid #e6e6e6;
            margin-top: 40rpx;
        }
        .checked {
            color: #1855ac;
            border-color: #74838c;
        }
    }
}
.trans-footer{
    transform: translateY(-100%)
}
//地区弹出框
.drawer-area{
    width: 750rpx;
    position: fixed;
    top: 100%;
    left: 0;
    background: #fff;
    transition: all .3s;
    z-index: 10000;
    .title-sort{
        display: flex;
        padding: 20rpx 0;
        border-bottom: 2rpx solid #f1f1f1;
        box-shadow: 0 3rpx 0 #f3f3f3;
        text{
            text-align: center;
            width: 33.3%;
            height: 106rpx;
            line-height: 106rpx;
            border-right: 1rpx solid #e3e3e3;
            &:last-child{
                border: 0;
            }
        }
        .checked{
            color: #1c5394;
        }
    }
    ul{
        width: 100%;
        padding-bottom: 32rpx;
        li{
            margin: 32rpx 40rpx 0 40rpx;
            box-shadow: 5rpx 5rpx 5rpx 5rpx #fafafa;
            text-align: center;
            line-height: 146rpx;
            font-size: 42rpx;
        }
    }
}
.ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

</style>
